<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册账号</title>
	<style type="text/css">
	body {
		background-color: rgb(177, 208, 224);
		font: normal 12px Trebuchet MS;
		color: #000;
	}
	
	.roundedCorners {
		width: 220px;
		padding: 10px;
		background-color: #DDEEF6;
		box-shadow: 0px 0px 10px 0px #888888;
		border: 1px solid #DDEEF6;
		border-radius: 6px;
		margin: auto;
	}
	
	.roundedCorners-textbox {
		border: 1px solid #999;
		width: 160px;
	}

	.checkbox {
		margin-left: 30px;
		border: 1px solid #999;
		width: 20px;
	}
	#toast {   
		position: fixed; /* 固定位置 */  
		top: 50%;   
		left: 50%;   
		width: 160px;
		height: 35px;
		margin-left: -100px;   
		border: 1px solid #666;   
		background-color: #333333;   
		padding: 10px 10px 10px 10px;  
		line-height: 30px;
		text-align:center;
		color: #EEEEEE;
		border-radius: 5px;
		opacity: 0; /* 透明度，取值0.1~0.9 */  

	}
</style>
</head>
<script type="text/javascript" src="js/base.js" ></script>
<script>
	//请求地址 http://10.0.152.17/AJAX/checkname?regname=需要验证的用户名
	//该地址验证所提交的用户名是否存在，如果存在，返回字符串yes，不存在返回no
	function checkname() {
		var _uname = document.getElementById("username");
		var request = null;
		if(window.ActiveXObject){
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} else {
			request = new XMLHttpRequest();	
		}
		request.open("get", "http://192.168.87.79:8080/AJAX/checkname?regname="+_uname.value, true);
		
		request.onreadystatechange = function(){
			if(request.readyState == 4) {
				if(request.responseText == "yes") {
					showToast("用户名已存在");
				} 
			}
		};
		
		request.send(); 
	}
	
	function showToast(msg){
		var t = document.getElementById("toast");
		t.innerHTML = msg;
		var timer = setInterval(function(){	
			if(Base.getStyle(t,"opacity") >= 1){
				clearInterval(timer);
				setTimeout(hideToast, 1000);
			} else {
				t.style.opacity = parseFloat(Base.getStyle(t, "opacity")) + 0.1;
			}
			document.title = t.style.opacity;
		},50);
	}
	
	function hideToast(){
		var t = document.getElementById("toast");
		var timer = setInterval(function(){	
			if(Base.getStyle(t,"opacity") == 0){
				clearInterval(timer);
			} else {
				t.style.opacity = parseFloat(Base.getStyle(t, "opacity")) - 0.1;
			}
			document.title = t.style.opacity;
		},50);
	}
</script>
<body>
	<form action="http://www.baidu.com" method="get" onsubmit="return check()">	
		<div class="roundedCorners">
			<label>账号</label>&nbsp;
			<input id="username" onblur="checkname()" type="text" class="roundedCorners-textbox" /><br /><br />
			<label>密码</label>&nbsp;
			<input id="password" type="text" class="roundedCorners-textbox" /><br /><br />	
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" value="注册" />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="清空" />
		</div>
	</form>	
	
	<div id="toast">测试文本</div>
</body>
</html>
